<template>
  <div class="manage-container">
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80px"
      />
      <el-table-column
        prop="createTime"
        label="时间"
        align="center"
      />
      <el-table-column
        prop="projectName"
        label="项目名称"
        align="center"
      />
      <el-table-column
        prop="userName"
        label="用户姓名"
        align="center"
      />
      <el-table-column
        prop="contactInformation"
        label="联系方式"
        align="center"
      />
      <el-table-column
        prop="content"
        label="用户咨询描述"
        align="center"
      />
      <el-table-column prop="date" label="操作" align="center">
        <div slot-scope="scoped">
          <span class="show" @click="handleShow(scoped.row)">查看</span>
        </div>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      :current-page="queryParams.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 查看详情 -->
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="666px"
      :before-close="handleClose"
    >
      <div class="dialogContent">
        <table>
          <tr>
            <td class="_label">时间</td>
            <td class="_value" colspan="4">{{ dialogData.createTime }}</td>
          </tr>
          <tr>
            <td class="_label">项目名称</td>
            <td class="_value" colspan="4">{{ dialogData.projectName }}</td>
          </tr>
          <tr>
            <td class="_label">联系人</td>
            <td class="_value" colspan="4">{{ dialogData.userName }}</td>
          </tr>
          <tr>
            <td class="_label">联系方式</td>
            <td class="_value" colspan="4">{{ dialogData.contactInformation }}</td>
          </tr>
          <tr>
            <td class="_label">用户咨询描述</td>
            <td class="_value" colspan="4">{{ dialogData.content }}</td>
          </tr>
          <tr>
            <td class="_label">帮办员回复内容</td>
            <td class="_value" colspan="4">{{ dialogData.replyContent }}</td>
          </tr>
        </table>
  
      </div>
      <div class="pa-text-rt">
        <el-button type="primary" size="small" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <!-- <WorkAdd
      :dialog-visible.sync="addFlag"
      :type="queryParams.withCodeStatus"
      @refresh="search"
    /> -->
  </div>
</template>
<script>
import { http_project2 } from '@/api'
// import WorkAdd from './add.vue'
export default {
//   components: {
//     WorkAdd
//   },
  props: {
    projectId: String
  },
  data() {
    return {
      tabs: [
        {
          label: '有码项目',
          value: 0
        },
        {
          label: '无码项目',
          value: 1
        }
      ],
      date: '',
      addFlag: false,
      dialogVisible: false,
      dialogData: {},
      loading: false,
      tableData: [],
      queryParams: {
        withCodeStatus: 0, //0有码1无码
        projectId: "",
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  mounted() {
    this.queryParams.projectId = this.projectId;
    this.getList()
  },
  methods: {
    search() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    async getList() {
      try {
        this.loading = true
        if (this.queryParams.startTime == null) {
          this.queryParams.startTime = ''
        }
        if (this.queryParams.endTime == null) {
          this.queryParams.endTime = ''
        }
        const res = await http_project2.codeList(this.queryParams)
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    async handleShow(row) {
      this.dialogData = row
      // const res = await detailApi({ id: row.id })
      // this.dialogData = res.data
      this.dialogVisible = true
    },
    handleTab(item) {
      this.queryParams.withCodeStatus = item.value
      this.search()
    },
    handleCurrentChange(pageNo) {
      this.queryParams.pageNo = pageNo
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
  <style lang="scss" scoped>
  .manage-container {
    .head-filter {
      width: 353px;
      height: 62px;
      background: #dfe9ff;
      border-radius: 31px;
      margin-bottom: 32px;
  
      div {
        width: 164px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        cursor: pointer;
      }
  
      .checked {
        background: #3d78ff;
        border-radius: 23px;
        color: #fff;
      }
    }
  
    .search {
      margin-bottom: 30px;
  
      .input {
        width: 215px;
        height: 48px;
        box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
        border-radius: 14px;
        margin-left: 16px;
      }
  
      .search-button {
        width: 90px;
        height: 41px;
        background: #4880ff;
        border-radius: 5px;
        margin-left: 24px;
        color: #fff;
      }
    }
  
    :deep(.show) {
      color: #3f8cff;
      cursor: pointer;
    }
  
    :deep(.dialogContent) {
      padding: 36px 0 98px 0;
      font-size: 16px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
  
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 30px;
    }
  }
  @media (min-width: 1280px) {
    .el-date-editor.el-input,
    .input {
      width: 182px !important;
      box-sizing: border-box;
      margin-right: 10px;
    }
  }
  table {
    width: 100%;
    border-collapse: collapse;
    td {
      font-size: 14px;
      padding: 15px;
      font-weight: 600;
    }
    ._label {
      width: 30%;
      font-size: 14px;
      font-weight: 600;
      text-align: right;
      background-color: #f6f6f6;
    }
    ._value {
      font-weight: normal;
      text-align: left;
    }
  }
  table,
  th,
  td {
    border: 1px solid #bed0d3;
  }
  </style>
  